<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>18.4 v-on 指令</title>

	<style>
		/* input[type="text"] {
			height: 30px;
			width: 300px;
			margin-bottom: 10px;
			border-radius: 5px;
			padding: 2px;
			font-size: 16px;

		} */

		button {
			width: 100px;
			height: 40px;
		}

		input {
			height: 36px;
		}
	</style>

</head>

<body>


	<div id="app">


		<!-- <v-on></v-on> -->


		<button v-on:click="onClick" v-on="{mouseenter:onEnter,mouseleave:onOut}">
			点我
		</button>


		<!-- <form v-on:submit="onSubmit($event)">
			<input type="text" name="" id="">
			<button type="submit">提交</button>
		</form> -->


		<!-- 
			阻止默认行为
			submit.prevent
			停止冒泡
			submit.stop
		 -->
		<!-- <form v-on:submit.prevent="onSubmit">
			<input type="text" name="" id="">
			<button type="submit">提交</button>
		</form> -->


		<!-- 键盘敲入 enter 事件  -->
		<!-- <form v-on:submit.prevent="onSubmit" v-on:keyup.enter="onEnter">
			<input type="text" name="" id="">
			<button type="submit">提交</button>
		</form> -->


		<!-- 快捷方式 使用 @ 符合 用来绑定事件 -->
		<form @submit.prevent="onSubmit" @keyup.enter="onEnter">
			<input type="text" name="" id="">
			<button type="submit">提交</button>
		</form>


	</div>


	<script src="../lib/vue.js"></script>
	<script src="js/main.js"></script>

</body>

</html>